/** @method ConditionGroup
 *  @description 条件组
 **/
import React, { useState, useEffect } from 'react';
import { Row, Col, Icon } from 'antd';
import Conditions from './Conditions';
import JunctionType from './JunctionType';
import { compare } from '../../utils/compare';
import './index.less';

export default function ConditionGroup(props) {
  const { logs, isHit = false } = props;
  const [conditions, setConditions] = useState([]);
  const [junctionType, setJunctionType] = useState('none');

  console.log('---', logs, conditions);
  useEffect(() => {
    // console.log(props.value);
    setConditions(props.value.conditions);
    setJunctionType(props.value.junction_type);
  }, [props.value]);

  const handleChangeConditions = (value) => {
    setConditions(Object.assign([], value));

    props.onChange &&
      props.onChange({
        conditions: value,
        junction_type: junctionType,
        id: props.value.id,
      });
  };

  const handleChangeJunctionType = (value) => {
    setJunctionType(value);
    props.onChange &&
      props.onChange({
        junction_type: value,
        conditions,
        id: props.value.id,
      });
  };

  return (
    <div>
      {!props.isFirst > 0 && (
        <Row>
          <Col span={4}>
            <JunctionType
              value={junctionType}
              onChange={handleChangeJunctionType}
              disabled={props.disabled}
              style={compare(props, 'junction_type')}
              isTxt={props.isTxt}
            />
          </Col>
        </Row>
      )}
      <div className={isHit ? 'condition-group-item border-hit' : 'condition-group-item'}>
        <Conditions
          {...props}
          value={conditions}
          placeholder={props.placeholder}
          onChange={handleChangeConditions}
          variable={props.variable}
          using_variables={props.using_variables}
          operatorOptions={props.operatorOptions}
          disabled={props.disabled}
          compareData={(props.compareData && props.compareData.conditions) || []}
        />
        {!props.disabled && <Icon type='minus-circle' className='close' onClick={() => props.onDel && props.onDel()} />}
      </div>
    </div>
  );
}
